<template>
  <div style="padding: 20px;">
    <!--基本信息---->
    <el-card class="box-cardaa">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-form :model="form" label-width="100px" size="mini">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="调拨单号" required>
              <el-input v-model="form.code" placeholder="系统自动生成" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调拨主题" required>
              <el-input v-model="form.topic" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请人">
              <el-input v-model="form.applicant" placeholder="许含斌" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请部门">
              <el-input v-model="form.department" placeholder="生产部门" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="调拨类型">
              <el-select v-model="form.type" placeholder="请选择" style="width: 496px;">
                <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="item in listdata"
                  :key="item.index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="调拨说明">
              <el-input type="textarea" v-model="form.illustrate" placeholder="请输入" cols="8" rows="4"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" cols="8" rows="4"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!--设备明细-->
    <el-card class="box-card2aa">
      <div slot="header" class="clearfix">
        <span>设备明细</span>
      </div>
      <div style="margin-bottom: 20px;">
        <el-button @click="dialogVisible = true">添加</el-button>
        <el-button @click="deleteSelected" style="margin-left: 10px;">移除</el-button>
      </div>
      <el-table :data="tableData" ref="registTable" stripe style="width: 100%;" :cell-style="{ padding: '0px' }"
        :row-style="{ height: '35px' }">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="index" label="序号" width="60" align="center" fixed>
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center" fixed>
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="removeRow(scope.$index)">移除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="设备编号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="name" label="设备名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="specifications" label="规格型号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="deviceType" label="设备类型" width="120" align="center">
        </el-table-column>
        <el-table-column prop="brand" label="品牌" width="120" align="center">
        </el-table-column>
        <el-table-column prop="useDepartments" label="调出部门" width="120" align="center">
        </el-table-column>
        <el-table-column prop="theEquipment" label="原负责人" width="120" align="center">
        </el-table-column>
        <el-table-column prop="storageLocation" label="存放位置" width="120" align="center">
        </el-table-column>
        <el-table-column label="调入部门" width="150" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.department" placeholder="请选择">
              <el-option label="部门A" value="A"></el-option>
              <el-option label="部门B" value="B"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="新负责人" width="190" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.newPerson" placeholder="请输入">
              <el-button slot="append" icon="el-icon-search" @click="searchPerson"></el-button>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="调入地点" width="150" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.newLocation" placeholder="请选择">
              <el-option label="地点A" value="A"></el-option>
              <el-option label="地点B" value="B"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="180" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.note" placeholder="请输入" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--设备选择框-->
    <el-dialog title="选择设备" :visible.sync="dialogVisible" width="60%">
      <div>
        <el-input placeholder="请输入设备编号/名称/规格型号" v-model="searchInput"
          style="width: 20%; margin-right: 10px;"></el-input>
        <el-select placeholder="请选择设备类型" v-model="selectedType" style="width: 20%; margin-right: 10px;">
          <el-option label="生产设备" value="生产设备"></el-option>
        </el-select>
        <el-select placeholder="请选择使用部门" v-model="selectedDepartment" style="width: 20%; margin-right: 10px;">
          <el-option label="生产部门" value="生产部门"></el-option>
        </el-select>
        <el-button type="primary" @click="handleSearch2">查询</el-button>
        <el-button @click="handleReset2">重置</el-button>
      </div>

      <el-table ref="registTable2" size="mini" :cell-style="{ padding: '0px' }" :row-style="{ height: '35px' }"
        :data="filteredData" style="width: 100%; margin-top: 20px;" stripe>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="index" label="序号" width="50" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="code" label="设备编号" width="170" align="center"></el-table-column>
        <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
        <el-table-column prop="specifications" label="规格型号" align="center"></el-table-column>
        <el-table-column prop="deviceType" label="设备类型" align="center"></el-table-column>
        <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
        <el-table-column prop="useDepartments" label="使用部门" align="center"></el-table-column>
        <el-table-column prop="storageLocation" label="存放位置" align="center"></el-table-column>
      </el-table>

      <el-pagination background layout="prev, pager, next, sizes, total" :total="total" :page-size.sync="pageSize"
        :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" @size-change="handleSizeChange"
        @current-change="handlePageChange2" style="margin-top: 20px;" />

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm2">确认</el-button>
      </div>
    </el-dialog>

    <!--关联文件-->
    <div>
      <el-card class="box-card3aa">
        <div slot="header" class="clearfix">
          <span>关联文件</span>
        </div>
        <el-button-group style="margin-bottom: 20px;">
          <el-upload ref="upload2" action="http://localhost:9289/maintenance/upload2" :on-success="handleUploadSuccess2"
            :file-list="fileList" :auto-upload="true" :show-file-list="false" :before-upload="beforeUpload">
            <el-button>上传文档</el-button>
            <el-button @click="removeSelectedRows2">移除</el-button>
          </el-upload>
        </el-button-group>
        <el-table :data="documents" style="width: 100%;" border @selection-change="handleSelectionChange2">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="name" label="文件名"></el-table-column>
          <el-table-column prop="uploadDate" label="上传时间"></el-table-column>
          <el-table-column prop="uploader" label="上传者"></el-table-column>
          <el-table-column prop="size" label="文档大小"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="removeRow3(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div style="height: 120px;">
      <el-footer class="footer">
        <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px;">关闭</el-button>
        <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px;">确认</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
import { selectZi } from '@/api/eastjet-maintenance/type/type'
import { listEquipment, listEquipment2 } from '@/api/eastjet-maintenance/sb/sb'
import { InsertAllocate } from '@/api/eastjet-maintenance/dao/dao'
export default {
  data() {
    return {
      //调拨类型保存
      listdata: [],
      //关联文件上传
      documents: [],
      fileList: [],
      multipleSelection: [],
      //选择设备详情
      dialogVisible: false,
      searchInput: '',
      selectedType: '',
      selectedDepartment: '',
      filteredData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      tableData: [],
      form: {
        code: '',
        topic: '',
        applicant: this.$store.state.user.name,
        department: '生产部门',
        type: '',
        illustrate: '',
        remark: '',
        tableData: [],
        documents: []
      },
    };
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      selectZi("diao_bo").then((res) => {
        this.listdata = res.data.data;
      });
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
        this.total = res.data.data.total;
        this.currentPage = res.data.data.pageNum
        this.pageSize = res.data.data.pageSize
        console.log("分页数据", res)
      });
    },
    //取消确定
    handleCancel() {
      this.$router.go(-1);
    },
    //确定
    handleConfirm() {
      this.form.tableData = this.tableData
      this.form.documents = this.documents
      //新增设备调拨
      InsertAllocate(this.form).then((res) => {
        if (parseInt(res.data.code) == 520) {
          this.$router.go(-1);
        } else {
          this.$notify.error({
            title: '错误',
            message: '这是一条错误的提示消息'
          });
        }
      });
    },
    //关联文件上传
    removeRow3(index) {
      this.documents.splice(index, 1);
    },
    removeSelectedRows2() {
      this.documents = this.documents.filter(
        (item) => !this.multipleSelection.includes(item)
      );
    },
    handleSelectionChange2(val) {
      this.multipleSelection = val;
    },
    //文件上传成功时候
    handleUploadSuccess2(response, file, fileList) {
      this.documents.push({
        name: file.name,
        url: file.url,
        uploadDate: new Date().toLocaleDateString('zh').replaceAll('/', '-'),
        uploader: this.$store.state.user.name,
        size: file.size + " KB",
      });
      console.log("数据2", this.documents);
    },
    //选择设备
    handleSearch2() {
      alert(13)
      this.currentPage = 1;
    },
    //清空查询条件
    handleReset2() {
      this.searchInput = '';
      this.selectedType = '';
      this.selectedDepartment = '';
    },
    handlePageChange2(page) {
      this.currentPage = page;
      listEquipment2(this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
        this.total = res.data.data.total;
        this.currentPage = res.data.data.pageNum
        this.pageSize = res.data.data.pageSize
      });
    },
    handleSizeChange(val) {
      listEquipment2(this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
        this.total = res.data.data.total;
        this.currentPage = res.data.data.pageNum
        this.pageSize = res.data.data.pageSize
      });
    },

    handleConfirm2() {
      // 处理确认操作
      this.tableData = []
      const selected = this.$refs.registTable2.selection;
      for (let i = 0; i < selected.length; i++) {
        this.tableData.push({ ...selected[i], "department": "", "newPerson": "", "newLocation": "", "note": '' })
      }
      this.$refs.registTable2.clearSelection();
      this.dialogVisible = false;
      console.log('数据ee', this.tableData);
    },
    removeRow(index) {
      this.tableData.splice(index, 1);
    },
    deleteSelected() {
      const selected = this.$refs.registTable.selection;
      this.tableData = this.tableData.filter(item => !selected.includes(item));
    },
    searchPerson() {
      // 搜索新负责人的逻辑
    }
  }
};
</script>

<style scoped>
.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 12;
  width: 100%;
}

.box-cardaa {
  width: 1254px;
  height: 410px;
  margin-left: 10px;
}

.box-card2aa {
  width: 1254px;
  margin-left: 10px;
  margin-top: 20px;
}

.box-card3aa {
  width: 1254px;
  margin-left: 10px;
  margin-top: 20px;
}
</style>
